<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>只处理自身的事件</title>
    <style>
        .box1 {
            width: 600px;
            height: 600px;
            background-color: red;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="change" class="change">
    <div class="box1" @click="box1Clicked">
        <!--事件的响应默认情况从内向外处理-->
        <!--.self 只处理自身的事件，不去处理其他的事件-->
        <div class="box2" @click.stop.self="box2Clicked">
            <div class="box3" @click="box3Clicked"></div>
        </div>
    </div>
</div>

<script !src="">
    function box1Clicked() {
        console.log("点击了 外部区域");
    }

    function box2Clicked() {
        console.log("点击了 中间区域");
    }

    function box3Clicked() {
        console.log("点击了 内部区域");
    }

    function event_handling(element) {
        // 获取所有的属性
        let attributeNames = element.getAttributeNames();
        // console.log(attributeNames);

        for (let i = 0; i < attributeNames.length; i++) {
            // console.log(attributeNames[i]);

            if (attributeNames[i].indexOf("data-on:") === 0 || attributeNames[i].indexOf("@") === 0) {
                let start = null
                let event_name = null
                let modifier = null
                let event_code = null

                if (attributeNames[i].indexOf("data-on:") === 0) {
                    start = attributeNames[i].indexOf(":")
                } else {
                    start = attributeNames[i].indexOf("@")
                }

                if (attributeNames[i].indexOf(".") !== -1) {
                    event_name = attributeNames[i].substring(start + 1, attributeNames[i].indexOf("."));
                    modifier = attributeNames[i].substring(attributeNames[i].indexOf(".") + 1)
                } else {
                    event_name = attributeNames[i].substring(start + 1)
                }

                event_code = element.getAttribute(attributeNames[i])

                console.log(event_name);
                console.log(event_code);
                console.log(modifier);

                element.addEventListener(event_name, function (event) {
                    if (modifier !== null) {

                        let split = modifier.split(".");


                        /*for (let j = 0; j < split.length; j++) {
                            switch (split[j]) {
                                case "stop":
                                    event.stopPropagation()
                                    break;
                                case "prevent":
                                    event.preventDefault()
                                    break
                                default:
                                    break
                            }
                        }*/

                        let self = false
                        if (split.indexOf("prevent") !== -1){
                            event.preventDefault()
                            split.splice(split.indexOf("prevent"), 1)

                        }
                        if (split.indexOf("stop") !== -1){
                            event.stopPropagation()
                            split.splice(split.indexOf("stop"), 1)

                        }

                        // 最后处理的事件
                        if (split.indexOf("self") !== -1){


                            split.splice(split.indexOf("self"), 1)

                            self = true
                        }


                        // console.log(split);
                        if (self){
                            // console.log(event.target);
                            // console.log(element);
                            if (event.target === element) {
                                eval(event_code + "()")
                                return
                            }
                            else {
                                return;
                            }

                        }
                        eval(event_code + "()")
                    }

                    else {
                        eval(event_code + "()")
                    }


                })

                element.removeAttribute(attributeNames[i])
            }

        }
    }

    let box1Element = document.querySelector("#change .box1");
    let box2Element = document.querySelector("#change .box2");
    let box3Element = document.querySelector("#change .box3");

    event_handling(box2Element)
    event_handling(box1Element)
    event_handling(box3Element)



</script>
</body>
</html>